<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/vue.js"></script>
    <script src="./js/vue-router.js"></script>
    <div id="app">
        <!-- 导航 -->
        <nav>
            <ul>
                <li>
                    <!-- <a href="#">首页</a> -->
                    <router-link to="/home">首页</router-link>
                </li>
                <li>
                    <router-link :to="{name:'news'}">新闻</router-link>
                </li>
                <li>
                    <router-link to="/hot">热门</router-link>
                </li>
            </ul>
        </nav>
        <div id="show">
            <!-- 内容展示区域(占位符) -->
            <router-view></router-view>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            // 配置路由
            router:new VueRouter({
                // 路径信息多个
                routes:[
                    {path:"/home",name:"home",component:{template:"<h1>首页conter</h1>"}},
                    {path:"/news",name:"news",component:{template:"<h1>新闻conter</h1>"}},
                    {path:"/hot",name:"hot",component:{template:"<h1>热门conter</h1>"}}
                ]
            })
        })
    </script>
</body>
</html>